<template>
	<div class="div_sill">
		<div class="div_expert">
			<div class="div_search" v-bind:class="{ touch : cut2 ,mark:cut6}">
				<div>
					<i class="fa fa-bars" aria-hidden="true" v-show="cut1"></i>
					<i class="layui-icon layui-icon-left" v-show="cut2" v-on:click="fieldHide"></i>
				</div>
				<div v-bind:class="{ touch : cut2 }">
					<div v-bind:class="{ touch : cut2 }">
						<div v-bind:class="{ touch : cut2 }">
							<i class="layui-icon layui-icon-tabs"></i>
						</div>
						<div>
							<i class="layui-icon layui-icon-search"></i>
						</div>
						<div v-on:click="fieldShow">
							<input maxlength="20" v-on:input="waitContent"  :readonly='cut1' placeholder="奥迪u盘" type="text" name="search" id="" v-model="format" />
						</div>
						<div v-if="cut4==false">
							<i id="search_close" class="layui-icon layui-icon-close" v-on:click="cleanContent"></i>
						</div>
					</div>
				</div>
				<div>
					<span v-show="cut1" v-on:click="to('/login')">登录</span>
					<span v-show="cut2">搜索</span>
				</div>
			</div>
			<div style="height: 45px;" v-show="cut2"></div>
			<div class="div_SearchContent div_recently touch" >
				<div>
					<span>最近搜索</span>
					<i class="layui-icon layui-icon-delete"></i>
				</div>
				<div>
					<span>
						<a href="">fdasjk</a>
					</span>
					<span>
						<a href="">理发撒的</a>
					</span>
					<span>
						<a href="">为发空间很大多少</a>
					</span>
					<span>
						<a href="">稳定</a>
					</span>
					<span>
						<a href="">为陈伟</a>
					</span>
					<span>
						<a href="">千瓦时</a>
					</span>
					<span>
						<a href="">额外的所所</a>
					</span>
					<span>
						<a href="">f问问k</a>
					</span>
				</div>
			</div>
			<div class="div_SearchContent div_HotContent" v-bind:class="{ touch : cut1 }" v-show="cut4" >
				<div>
					<span>热门搜索</span>
					<span v-on:click="hostHide">隐藏</span>
				</div>
				<div v-bind:class="{ touch : cut3 }">
					已隐藏搜索发现
				</div>
				<div v-bind:class="{ touch : cut3 }">
					<span>
						<a href="">fdasjk</a>
					</span>
					<span>
						<a href="">理发撒的</a>
					</span>
					<span>
						<a href="">为发空间很大多少</a>
					</span>
					<span>
						<a href="">稳定</a>
					</span>
					<span>
						<a href="">为陈伟</a>
					</span>
					<span>
						<a href="">千瓦时</a>
					</span>
					<span>
						<a href="">额外的所所</a>
					</span>
					<span>
						<a href="">f问问k</a>
					</span>
				</div>
			</div>
			<div class="div_candidate" v-if="cut4==false">
				<span>
					<a href="">范德萨</a>
					<div>
						<a href="">访问</a>
						<a href="">测温二次</a>
						<a href="">封测我</a>
					</div>
				</span>
				<span>
					<a href="">范德萨</a>
				</span>
				<span>
					<a href="">范德萨</a>
				</span>
				<span>
					<a href="">范德萨</a>
				</span>
				<span>
					<a href="">范德萨</a>
				</span>
				<span>
					<a href="">范德萨</a>
				</span>
			</div>
		</div>
		
		<div class='div_body' v-show="cut1">
			<div class="div_head" :style="ee">
				<div :style="rr">
					<slideshow :src='img' :button='true'></slideshow>
				</div>
			</div>
			<div class='div_nav'>
				<div id="div_nav_band">
					<div>
						<div>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车位博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>访问</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>位发送到博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车的位博山</span>
							</a>
						</div>
						<div>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车位博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>访问</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>位发送到博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车的位博山</span>
							</a>
						</div>
					</div>
					<div>
						<div>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车位博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>访问</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>位发送到博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车的位博山</span>
							</a>
						</div>
						<div>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车位博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>访问</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>位发送到博山</span>
							</a>
							<a href="">
								<img src="@/assets/img/小图标.png" alt="" />
								<span>车的位博山</span>
							</a>
						</div>
					</div>
				</div>	
				<div ref='btc'>
					<button></button>
					<button></button>
				</div>		
			</div>
			<div class="div_seckill">
				<div>					
					<a href="">
						<div>
							拓客秒杀
						</div>
						<div :hour='time'>
							{{ time }}点场
						</div>
						<div>
							<span class="hour">{{ timeA }}</span>
							<span>:</span>
							<span class="minute">{{ timeB }}</span>
							<span>:</span>
							<span class="second">{{ timeC }}</span>
						</div>
					</a>	
					<a href="">
						<div>
							<span>更多秒杀</span>
							<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
						</div>						
					</a>				
				</div>
				<div>
					<div>
						<div v-for="i in 7">
							<a href="">
								<img src="@/assets/img/21s.jpg" alt="" />
							</a>
							<span>
								<span>
									<em style="font-style: normal;">¥</em>
									<span>545</span>
								</span>
								<span>
									<em style="font-style: normal;">¥</em>
									<span>1545</span>
								</span>
							</span>
						</div>
						<a>
							<div >
								<div>
									<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
									<span>查看更多</span>
								</div>
								
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="div_recommend">
				<div>
					<img src="http://img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png" alt="" />
				</div>
				<div>					
					<a href="" v-for="i in count" >
						<div>								
							<div>
								<img src="@/assets/img/1585556632529147.png" alt=""  :style="uu"/>
							</div>
							<span>
								<img src="@/assets/img/autotrophy.png" alt=""  />
								<!-- <img src="@/img/supermarket.png" alt="" />
								<img src="@/img/logistics.png" alt="" />
								<img src="@/img/choiceness.png" alt="" />	 -->					
							这里填啥
							</span>
							<p>
								<span>
									<span>¥</span>
									<span>500</span>
									<span>满减</span>
									<!-- <span>闪购</span> -->																		   						
								</span>
								<span>
									看相似
								</span>
							</p>
							<p>
								<span>¥ 895</span>    																		   		
							</p>	
						</div>							
					</a>
				</div>
				<div>
					<a href="" v-on:click="acc">点击继续加载</a>
				</div>
			</div>
			<div class="div_homeTail">
				<div>
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">客户服务</a>
					<a href="">返回顶部</a>
				</div>
				<div>
					<div>
						<div>
							<i class="layui-icon layui-icon-cellphone"></i>
						</div>
						   
						<span>客户端</span>
					</div>
					<div>
						<div>
							<i class="layui-icon layui-icon-website"></i>
						</div>
						
						<span>国际版</span>
					</div>
					<div>
						<div>
							<i class="fa fa-television" aria-hidden="true"></i>
						</div>
						
						<span>电脑版</span>
					</div>
				</div>
				<div>
					我想起来高兴的事，你也是想起了高兴的事
				</div>
			</div>
		</div>
		
		
		<div class="div_common_Nav">
			<a>
				<div>
					<i class="layui-icon layui-icon-home"></i>   
					<span>首页</span>
				</div>			
			</a>
			<a>
				<div>
					<i class="layui-icon layui-icon-app"></i>   
					<span>分类</span>
				</div>			
			</a>
			<a>
				<div>
					<i class="layui-icon layui-icon-fire"></i>   
					<span>惊喜</span>
				</div>			
			</a>
			<a>
				<div>
					<i class="layui-icon layui-icon-cart"></i>  .
					<span>购物车</span>
				</div>			
			</a>
			<a>
				<div>
					<i class="layui-icon layui-icon-user"></i>  
					<span>未登陆</span>
				</div>		
			</a>
		</div>
	</div>
</template>

<script>
	import slideshow from '../../store/slideshow.vue';
	export default {
		data(){
			return {
				count :[1,1,1,1,1,1,1,1,1,11,1,1,1],
				img:[
					require('@/assets/img/tu.jpg'),
					require('@/assets/img/tou.jpg'),
					require('@/assets/img/timg.jpg'),
					require('@/assets/img/newtou.jpg')
				],
				format:'',
				time:0,
				timeA:'00',
				timeB:'00',
				timeC:'00',
				cut1:true,
				cut2:false,
				cut3:false,
				cut4:true,
				cut5:false,
				cut6:false,
				ee:'123px',
				rr:'',
				uu:'',
				scrollY:''
			}
		},
		created(){
			var T=this;
			var tWidth=window.screen.width;
			this.ee='height:'+(parseInt(((tWidth/2)*100))/100)+'px';
			this.rr="height:"+(parseInt(((tWidth/2)*100))/100-45)+'px';
			this.time=(new Date).getHours()%2==0?(new Date).getHours():(new Date).getHours()-1;
			this.uu=(tWidth-30)/2+'px';
			this.uu='height:'+this.uu+';width:'+this.uu;
			this.timing();
			
			$(window).scroll(function(){
				var y=$(window).scrollTop();
				if(y>0)
				{
					T.cut6=true;
				}else{
					T.cut6=false;
				}
			});
		},
		updated(){
			var T=this;
			this.$nextTick(function(){
				if(T.cut5)
				{
					window.scrollTo(0,T.scrollY);
					T.cut5=false;
				}
			});
		},
		mounted() {
			var T=this;
			this.$nextTick(function(){
				var tWidth=window.screen.width;
				$('html').css('font-size',tWidth*20/320+'px');
				$(window).resize(function(){
					var tWidth=window.screen.width;
					if(tWidth>=320)
					{
						$('html').css('font-size',tWidth*20/320+'px');
					}
				});
				new T.$event.touch({
					elem:$('#div_nav_band')[0],
					status:0x11,
					touchStatus:function(e){
						var c=T.$refs.btc;
						$(c).children().css('border-color','#b1b1b1');
						if(e=='w'){
							$(c).children().eq(1).css('border-color','red');
							$('#div_nav_band').css('left','-100%');
						}else if(e=='e'){
							$(c).children().eq(0).css('border-color','red');
							$('#div_nav_band').css('left','0');
						}
						
					}
				});
				
			});
		},
		methods:{
			acc(e){
				e.preventDefault();
				this.count.push(1);
			
			},
			to(e){
				this.$router.push(e);
			},
			timing(){
				var time=new Date();
				time.setHours(this.time+2,0,0);
				var end=parseInt(time.getTime()/1000);
				var This=this;
				setInterval(function(){
					var start=new Date;
					start=parseInt(start.getTime()/1000);
					var i=end-start;
					This.timeA='0'+parseInt(i/3600)%24;
					This.timeB=parseInt(i/60)%60<10?'0'+parseInt(i/60)%60:parseInt(i/60)%60;
					This.timeC=i%60<10?'0'+i%60:i%60;
				},500);
			},
			fieldShow(){
				this.scrollY=window.scrollY;
				this.cut1=false;
				this.cut2=true;
			},
			fieldHide(){
				this.cut1=true;
				this.cut2=false;
				this.cut4=true;
				this.cut5=true;
				this.format='';
				
			},
			hostHide(){
				if(this.cut3)
				{
					this.cut3=false;
				}else{
					this.cut3=true;
				}
			},
			waitContent(){
				if(!this.format)
				{
					this.cut4=true;
					return false;
				}
				this.cut4=false;
			},
			cleanContent(){
				this.format='';
				this.cut4=true;
			}
		},
		components:{
			slideshow
		}
	};
</script>
<style>
	body{
		background: #f6f6f6;
	}
</style>
<style src='../../assets/css/index.css' scoped>
</style>
